<template>
  <div class="com-page" ref='today_yuqing'>
    <div class="title">
<!--      <span class="iconfont arrow-down .icon-arrow-down"></span>-->
      <strong>
        丨 今日热点/敏感舆情
      </strong>
    </div>

    <div  class="message"
      v-for="(item,index) in today_yuqing.slice(0,3)">
      <div @click="change_to_detail(item.article_id)">
          {{ item.title.substring(0, 25) }}...
      </div>
      <section>
        &emsp; &emsp; {{ item.content.substring(0, 80) }}...
      </section>
      <div class="author">
       --- {{item.author}}&emsp;
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "today_yuqing_page",
  data() {
    return {
      today_yuqing: [],
    }
  },
  mounted() {
    this.getData()

    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  watch: {},
  methods: {

    change_to_detail(article_id){
      console.log(article_id)
      this.$router.push("/today_yuqing_detail?articleId="+article_id)

    },

    // 获取数据-今日热点舆情
    //
    async getData() {
      let ret = await this.$http.get('/index')
      this.today_yuqing = ret.data.data.todayhotArticle
      // console.log("today_yuqing_page-->",ret.data.data.todayhotArticle)
      // this.today_yuqing=
    },

    // 改变屏幕大小时该方法会自动调用
    screenAdapter() {
      // const titleFontSize = this.$refs.map_ref.offsetWidth / 100 *3.6
      // console.log("this.$refs.today_yuqing==>",this.$refs.today_yuqing.offsetWidth)
      const titleFontSize = this.$refs.today_yuqing.offsetWidth / 100 * 3.6
      // console.log(titleFontSize)
      // console.log(this.$refs.today_yuqing.style)
      this.$refs.today_yuqing.style.fontSize = titleFontSize + "px"
      // console.log("today_yuqing_font-size--->",this.$refs.today_yuqing.style.fontSize+"px")
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  height: 8%;
  width: 100%;
  /*background: #9a6e3a;*/
  //color: #CAA86B;

}

.flex_container {
  display: flex;
  height: 90%;
  width: 100%;
}

.message {
  height: 33%;

  div{
    color: #CAA86B;
    cursor:pointer
  }

  .author{
    text-align: right;
  }
}
</style>
